<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <script src="../babel.min.js"></script>
    <script type="text/babel">


        function Loading() {
            const [isLoading, setLoading] = React.useState(true);
            setTimeout(() => {
                setLoading(true);
            }, 2000);
            return isLoading && <div>加载中</div>
        }

        function MyDiv() {
            const name = 'hello'
            return <div>这是一个div组件, {name}</div>
        }

        function AoGuang() {
            const src = {
                url: 'https://i1.hdslb.com/bfs/archive/56d6530f86add8a59f3f9505028ee8b1d4e65f6a.jpg',
                name: '敖光'
            }
            return <img width="200" src={src.url} alt={src.name} title={src.name} />
        }

        class App extends React.Component {
            // // books = [
            // //     <h1>Hello React</h1>,
            // //     <h1>Hello Vue</h1>,
            // //     <h1>Hello Angular</h1>
            // // ]
            // books = []
            names = ['react', 'vue', 'angular']
            // constructor(props) {
            //     super(props);
            //     for (let i = 0; i < this.names.length; i++) {
            //         this.books.push(<h1 key={i}>{this.names[i]}</h1>)
            //     }
            // }
            render() {
                return (
                    <div>
                        <MyDiv />
                        <Loading />
                        <AoGuang />
                    </div>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>

</html>